h1 {
    text-align: center;
}

.container {
    width: 200px;
    margin: 20px auto;
}

.marker {
    width: 200px;
    height: 25px;
    margin-bottom: 10px;
}

/* CSS 属性设置元素的背景色 */
.red {
    background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
    box-shadow: 0 0 20px rgba(83, 14, 14, 0.8);
}

/* linear-gradient() CSS 函数创建一个由两种或多种颜色沿一条直线进行线性过渡的图像 */
.green {
    background: linear-gradient(#55680D, #71F53E, #116C31);
    box-shadow: 0 0 20px 0 #3B7E20CC;
}

/* hsl() 函数标记根据其色相、饱和度和明度来表达 sRGB 颜色。可选的 alpha 成分代表了颜色的透明度。 */
.blue {
    background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
    box-shadow: 0 0 20px 0 hsla(223, 59%, 31%, 0.8);
}

/* cap和pen两部分都要设置成行内块元素 以便设置宽高以及呈现在同一行 */
.cap {
    display: inline-block;
    width: 25%;
    height: 25px;
}

.pen {
    display: inline-block;
    width: 60%;
    height: 25px;
    /* 白色 透明度调高 */
    background-color: rgba(255, 255, 255, .5);
    border-left: 10px double black;
}

